<template>
	<div class="issue-pc-container">
		<!-- 布局 -->
		<el-container class="issue-pc-container-layout">
			<!-- 导航面包屑 -->
			<el-header class="issue-pc-container-layout-header">
				<BreadCrumb :renderArrs="renderArrs" />
			</el-header>
			<el-main class="issue-pc-container-layout-main">
				<el-container class="issue-pc-container-layout-main-tow-container">
					<el-aside class="issue-pc-container-layout-main-tow-container-aside" style="overflow: initial">
						<!-- 类目列表 -->
						<issue-pc-category :categoryArrs="categoryArrs" />
					</el-aside>
					<el-main class="issue-pc-container-layout-main-tow-container-main">
						<div class="issue-pc-container-layout-main-tow-container-main-detail">
							<!-- 详情列表 -->
							<issue-pc-detail />
						</div>
						<div class="issue-pc-container-layout-main-tow-container-main-pagination">
							<!-- 分页 -->
							<pagination />
						</div>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</div>
</template>

<script setup>
	const renderArrs = ref([
		{ path: '/', cnName: '首页' },
		{ path: '/issue', cnName: '常见问题' },
	]);
	const categoryArrs = [
		{
			name: '1  新注册',
		},
		{
			name: '2   定制 Q&A',
		},
		{
			name: '3  与付款相关的 Q&A',
		},
		{
			name: '4  与运输相关的 Q&A',
		},
		{
			name: '5  与产品检验相关的 Q&A',
		},
		{
			name: '6  与交易和作相关的 Q&A',
		},
		{
			name: '7  OEM/ODM 关系',
		},
		{
			name: '8  统一费率会员',
		},
	];
</script>

<style scoped lang="scss">
	@import url('~/assets/css/issue/pc.css');
	.issue-pc-container {
		width: 100%;
		height: 100%;
		padding: 66px 120px 0 55px;
		.issue-pc-container-layout {
			.issue-pc-container-layout-header {
				padding: 0;
			}
			.issue-pc-container-layout-main {
				padding: 0;
				.issue-pc-container-layout-main-tow-container {
					.issue-pc-container-layout-main-tow-container-aside {
						@include scaleWidth(260px);
						height: 860px;
					}
					.issue-pc-container-layout-main-tow-container-main {
						@include scaleWidth(1200px);
						padding: 0;
						padding: 16px;
						margin-left: 20px;
						@include flex(column, flex-start, flex-start);
						.issue-pc-container-layout-main-tow-container-main-detail {
							width: 100%;
						}
						.issue-pc-container-layout-main-tow-container-main-pagination {
							width: 100%;
							@include flex();
							padding: 20px;
							padding-top: 50px;
						}
					}
				}
			}
		}
	}
</style>
